<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../../css/demo.css" />
    
    <title>Jslet - DBAutoComplete</title>
    <script type="text/javascript" data-main="../../config.js" src="../../lib/requirejs/require.min.js"></script>
    <script type="text/javascript">
	    require(['dbcontrol/form/b-dbautocomplete']);
    </script>
</head>
<body>
    <div class="demo-header">
    <h4 id="top">Jslet - DBAutoComplete</h4>
	</div>
	<hr />
	<div class="demo-desc">
	<p>DBAutoComplete有三种匹配模式，两种匹配延时，支持大数据量。</p>
	</div>

	<div data-jslet="type: 'DBTable', dataset: 'employee'" style="margin-bottom: 10px"></div>
	
	<div class="container-fluid">
	<div class="form-horizontal">
	
	<div class="form-group form-group-sm" style="vertical-align: middle">
	<div class="col-sm-3">
		<label>1、三种匹配模式，可输入编码和名称&nbsp;&nbsp;</label>
			<select id="selSetMatchMode"
				onchange="">
				<option selected value="start">匹配开头</option>
				<option value="end">匹配结尾</option>
				<option value="any">任意匹配</option>
			</select>
	</div>
	<div class="col-sm-2">
		<input id="acDepartment" data-jslet="type: 'DBAutoComplete', dataset: 'employee', field: 'department', matchMode: 'start'" />
	</div>
	
	</div>
	
	<div class="form-group form-group-sm" style="vertical-align: middle">
	<div class="col-sm-3">
		<label>2、按字数延迟匹配（录入2个字符才开始匹配）</label>
	</div>
	<div class="col-sm-2">
		<input data-jslet="type: 'DBAutoComplete', dataset: 'employee', field: 'department', minChars: 2" />
	</div>
	</div>
	
	<div class="form-group form-group-sm" style="vertical-align: middle">
	<div class="col-sm-3">
		<label>3、按时间延迟匹配（录入后延迟500ms才开始匹配）</label>
	</div>
	<div class="col-sm-2">
		<input data-jslet="type: 'DBAutoComplete', dataset: 'employee', field: 'department', minDelay: 500" />
	</div>
	</div>

	<div class="form-group form-group-sm" style="vertical-align: middle">
	<div class="col-sm-5">
		<label>4、设置部门可以选择现有的，也可以录入新的部门(录入和选择时，观察"部门"和“部门名称”两字段的值)</label>
	</div>
	<div class="col-sm-2">
		<input data-jslet='type:"DBAutoComplete", dataset: "employee", field:"deptName", lookupField:"department"' />
	</div>
	</div>

	</div>
	</div>
	
	
	<hr />
	<h4>源码</h4>
	<h5>HTML</h5>
    <pre class="prettyprint linenums"><code>
    //1、三种匹配模式，可输入编码和名称
    &lt;input id="acDepartment" data-jslet="type: 'DBAutoComplete', dataset: 'employee', field: 'department', matchMode: 'start'" />
    
    //2、按字数延迟匹配（录入2个字符才开始匹配）
    &lt;input data-jslet="type: 'DBAutoComplete', dataset: 'employee', field: 'department', minChars: 2" />
    
    //3、按时间延迟匹配（录入后延迟500ms才开始匹配）
    &lt;input data-jslet="type: 'DBAutoComplete', dataset: 'employee', field: 'department', minDelay: 500" />
    
    //4、设置部门可以选择现有的，也可以录入新的部门(录入和选择时，观察"部门"和“部门名称”两字段的值)
    &lt;input data-jslet='type:"DBAutoComplete", dataset: "employee", field:"deptName", lookupField:"department"' />
    
	</code></pre>
    
	<h5>JavaScript</h5>
    <pre class="prettyprint linenums"><code>
	//datasetMetaStore定义在公共js:common/datasetmetastore.js中
	//将数据集定义信息仓库加到datasetFactory中，创建Dataset时会仓库里去定义信息
	jslet.data.datasetFactory.addMetaStore(window.datasetMetaStore);
	//通过工厂方法，可以自动创建主数据集及相关的数据集
    jslet.data.datasetFactory.createDataset('employee').done(function() {
    	var dsEmployee = jslet.data.getDataset('employee');
    	
        dsEmployee.createField({name: "deptName", dataType: 'S', length: 10, label: "部门名称", displayOrder: 3});
        //设置当“department”字段改变时，同时取“部门表”的“name"的值赋给“deptName”字段
        dsEmployee.getField('department').lookup().returnFieldMap({deptName: 'name'});
    	dsEmployee.query();
    	jslet.ui.install();
    });
    
    //设置匹配模式
    $('#selSetMatchMode').on('change', function() {
    	jslet('#acDepartment').matchMode(this.value).renderAll();
    });
	</code></pre>

    <script type="text/javascript">
       window.LOADER_BASE_URL = "../../lib/prettify";
    </script>
    <script type="text/javascript" src="../../lib/prettify/run_prettify.js"></script>
		
</body>
</html>
